﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.NavsModel
@{
    ViewData["Title"] = "Navs";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


<h2>Navs</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>

<h4>Base nav</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-nav nav-style="Pill" align="Center">
            <abp-nav-item>
                <a abp-nav-link active="true" href="#">Active</a>
            </abp-nav-item>
            <abp-nav-item>
                <a abp-nav-link href="#">Longer nav link</a>
            </abp-nav-item>
            <abp-nav-item>
                <a abp-nav-link href="#">link</a>
            </abp-nav-item>
            <abp-nav-item>
                <a abp-nav-link disabled="true" href="#">disabled</a>
            </abp-nav-item>
        </abp-nav>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>

&lt;abp-nav nav-style=&quot;Pill&quot; align=&quot;Center&quot;&gt;
    &lt;abp-nav-item&gt;
&lt;a abp-nav-link active=&quot;true&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt;
    &lt;/abp-nav-item&gt;
    &lt;abp-nav-item&gt;
&lt;a abp-nav-link href=&quot;#&quot;&gt;Longer nav link&lt;/a&gt;
    &lt;/abp-nav-item&gt;
    &lt;abp-nav-item&gt;
&lt;a abp-nav-link href=&quot;#&quot;&gt;link&lt;/a&gt;
    &lt;/abp-nav-item&gt;
    &lt;abp-nav-item&gt;
&lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;disabled&lt;/a&gt;
    &lt;/abp-nav-item&gt;
&lt;/abp-nav&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;ul class=&quot;nav justify-content-center nav-pills&quot;&gt;
   &lt;li class=&quot;nav-item&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;nav-link active&quot;&gt;Active&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class=&quot;nav-item&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Longer nav link&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class=&quot;nav-item&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;link&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class=&quot;nav-item&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;disabled&lt;/a&gt;
   &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>

    <div class="attribute-area">
        <ul>
            <li>
                <b>For vertical nav</b>, set nav-style "PillVertical". 
            </li>
        </ul>
    </div>
</div>

<h4>Base nav</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-nav-bar size="Lg" navbar-style="Dark_Warning">
            <a abp-navbar-brand href="#">Navbar</a>
            <abp-navbar-toggle>
                <abp-navbar-nav>
                    <abp-nav-item active="true">
                        <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
                    </abp-nav-item>
                    <abp-nav-item>
                        <a abp-nav-link href="#">Link</a>
                    </abp-nav-item>
                    <abp-nav-item dropdown="true">
                        <abp-dropdown>
                            <abp-dropdown-button nav-link="true" text="Dropdown" />
                            <abp-dropdown-menu>
                                <abp-dropdown-header>Dropdown header</abp-dropdown-header>
                                <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
                                <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                                <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                                <abp-dropdown-divider />
                                <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
                            </abp-dropdown-menu>
                        </abp-dropdown>
                    </abp-nav-item>
                    <abp-nav-item>
                        <a abp-nav-link disabled="true" href="#">Disabled</a>
                    </abp-nav-item>
                    <span abp-navbar-text>
                        Sample Text
                    </span>
                </abp-navbar-nav>
            </abp-navbar-toggle>
        </abp-nav-bar>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>

&lt;abp-nav-bar size=&quot;Lg&quot; navbar-style=&quot;Dark_Warning&quot;&gt;
    &lt;a abp-navbar-brand href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
    &lt;abp-navbar-toggle&gt;
        &lt;abp-navbar-nav&gt;
            &lt;abp-nav-item active=&quot;true&quot;&gt;
                &lt;a abp-nav-link href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item&gt;
                &lt;a abp-nav-link href=&quot;#&quot;&gt;Link&lt;/a&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item dropdown=&quot;true&quot;&gt;
                &lt;abp-dropdown&gt;
                    &lt;abp-dropdown-button nav-link=&quot;true&quot; text=&quot;Dropdown&quot; /&gt;
                    &lt;abp-dropdown-menu&gt;
                        &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
                        &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
                        &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
                        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
                        &lt;abp-dropdown-divider /&gt;
                        &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
                    &lt;/abp-dropdown-menu&gt;
                &lt;/abp-dropdown&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item&gt;
                &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;
            &lt;/abp-nav-item&gt;
        &lt;/abp-navbar-nav&gt;            
        &lt;span abp-navbar-text&gt;
          Sample Text
        &lt;/span&gt;
    &lt;/abp-navbar-toggle&gt;
&lt;/abp-nav-bar&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-warning&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;navbar-brand&quot;&gt;Navbar&lt;/a&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#13da550319ec478099dd4c9c3efb3d09&quot; aria-controls=&quot;13da550319ec478099dd4c9c3efb3d09&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
    &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;13da550319ec478099dd4c9c3efb3d09&quot;&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
            &lt;li active=&quot;true&quot; class=&quot;nav-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;nav-link&quot;&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item dropdown&quot;&gt;
                &lt;div class=&quot;btn-group&quot;&gt;
                    &lt;a class=&quot;dropdown-toggle btn nav-link&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; data-busy-text=&quot;Processing...&quot; roles=&quot;button&quot; href=&quot;#&quot;&gt;&lt;span&gt;Dropdown&lt;/span&gt;&lt;/a&gt;
                    &lt;div&gt;&lt;/div&gt;
                    &lt;div class=&quot;dropdown-menu&quot;&gt;
                        &lt;h6 class=&quot;dropdown-header&quot;&gt;Dropdown header&lt;/h6&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item active&quot;&gt;Action&lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item disabled&quot;&gt;Another disabled action&lt;/a&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;
                        &lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Separated link&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;nav-link disabled&quot;&gt;Disabled&lt;/a&gt;
            &lt;/li&gt;
            &lt;span class=&quot;navbar-text&quot;&gt;
                 Sample Text
            &lt;/span&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>
